<template>
    <Modal v-model="show" :closable="false" :mask-closable="false" @on-visible-change="showModal" :width="500">
        <el-form ref="formInfo" label-position="right" label-width="80px" :model="formInfo">
            <el-form-item label="每箱数量" prop="count">
                <el-input v-model="formInfo.count" type="number" />
            </el-form-item>
            <el-form-item label="长" prop="length">
                <el-input v-model="formInfo.length" type="number" />
            </el-form-item>
            <el-form-item label="宽" prop="width">
                <el-input v-model="formInfo.width" type="number" />
            </el-form-item>
            <el-form-item label="高" prop="height">
                <el-input v-model="formInfo.height" type="number" />
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button size="small" @click="cancel">取消</el-button>
            <el-button size="small" type="primary" :loading="modalLoading" @click="ok">确定</el-button>
        </div>
    </Modal>
</template>
<script>
import api from "@/api/api"

export default {
    name: 'StorageProduct',
    data() {
        return {

            show: false,

            formInfo: {
                count: 1,
                width: null,
                length: null,
                height: null

            },
            modalLoading: false

        };
    },
    mounted: function() {



    },
    props: [
        'product'
    ],
    methods: {
        hideDialog() {
            this.modalLoading = false;
            this.show = false;
        },
        showDialog() {
            this.show = true;
        },
        showModal: function(value) {
            if (value) {

            } else {
                this.formInfo = {
                    count: 1,
                    width: null,
                    length: null,
                    height: null

                };
            }
        },
        ok: function() {
            this.$emit("boxCallBack", this.formInfo.count, this.formInfo.length, this.formInfo.width, this.formInfo.height);
        },
        cancel: function() {
            this.hideDialog();
            this.$emit("cancel");
        }
    }
}
</script>
<style scoped>
</style>